<template>
  <div>
    <el-form
      ref="searchForm"
      :model="searchForm"
      label-width="80px"
      class="search-form"
    >
      <el-row>
        <el-col :span="18">
          <el-form-item label="时间范围" class="time-range">
            <el-date-picker
              v-model="searchForm.timeRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
            />
          </el-form-item>
          <el-form-item label="操作人员" class="user-input">
            <el-input v-model="searchForm.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" align="right">
          <el-form-item label-width="20px">
            <el-button type="primary" @click="clickSearchLog">查询</el-button>
            <el-button @click="reserve">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" style="width: 100%" height="433" border>
      <el-table-column prop="id" label="日志编号" align="center" />
      <el-table-column prop="module" label="操作模块" align="center" />
      <el-table-column prop="username" label="操作人员" align="center" />
      <el-table-column prop="ip" label="IP地址" width="350" align="center" />
      <el-table-column
        prop="created_at"
        label="操作时间"
        width="300"
        align="center"
      />
      <el-table-column
        prop="operationName"
        label="操作内容"
        width="400"
        align="center"
      />
      <el-table-column prop="result" label="操作结果" align="center" />
    </el-table>
    <el-pagination
      :current-page.sync="page.current"
      :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90]"
      :page-size.sync="page.limit"
      layout="sizes, prev, pager, next ,total"
      :total="page.total"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { selectBackmanageLog } from '@/api/back-management/user-manage/log'
export default {
  name: 'Log',
  props: {
    hospitalId: {
      type: String,
      default: '17'
    },
    regionId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: [],
      searchForm: {
        timeRange: [],
        username: ''
      },
      page: {
        current: 1,
        limit: 10,
        total: 0
      }
    }
  },
  created() {
    this.searchLog()
  },
  methods: {
    clickSearchLog() {
      this.page.current = 1
      this.searchLog()
    },
    reserve() {
      this.searchForm.username = ''
      this.searchForm.timeRange = []
    },
    searchLog() {
      if (!this.searchForm.timeRange) {
        this.searchForm.timeRange = []
      }
      selectBackmanageLog({
        regionId: this.regionId,
        hospitalId: this.hospitalId,
        pageSize: this.page.limit,
        pageNum: this.page.current,
        username: this.searchForm.username,
        dateStart:
          this.searchForm.timeRange.length > 0
            ? this.searchForm.timeRange[0]
            : '',
        dateEnd:
          this.searchForm.timeRange.length > 0
            ? this.searchForm.timeRange[1]
            : ''
      }).then((res) => {
        if (!(typeof res == 'string' && res.indexOf('云服务接口错误') > -1)) {
          this.tableData = res.data.list
          this.page.total = res.data.total
        }
      })
    },
    handleSizeChange(val) {
      this.page.limit = val
      this.page.current = 1
      this.searchLog()
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.searchLog()
    }
  }
}
</script>

<style lang="scss" scoped>
.search-form {
  .time-range {
    width: 500px;
    float: left;
  }
  .user-input {
    width: 350px;
    float: left;
  }
}
</style>
